/*
 * Copyright (c) Facebook, Inc. and its affiliates.
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.main-content {
  position: relative;
  height: 100%;
  min-height: 100vh;
  background-color: $gray-100;
  -webkit-text-size-adjust: 100%;

  // Navbar
  .navbar-top {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  // Container
  .container-fluid {
    padding-left: $main-content-padding-x;
    padding-right: $main-content-padding-x;
  }
}

// **** Splash Page ****

.splash {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 100vh;
  img {
    width: 50vw;
    height: auto;
    display: block;
    margin: auto;
  }
}

// **** Panels ****

.splitView {
  height: 94vh;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.divider-hitbox {
  cursor: col-resize;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-left: 0rem;
  padding-right: 0.5rem;
}

.divider {
  height: 100%;
  border: 1px solid $gray-700;
}

.leftPane {
  height: 94vh;
  overflow: auto;
}

.rightPane {
  flex: 1;
  height: 94vh;
  overflow: auto;
}

// **** Custom dropdown ****

.search-bar {
  position: sticky;
  top: 0%;
  min-width: 10px;
  z-index: 4;
}

// **** Offcanvas ****

.offcanvas-dark-mode {
  color: $white;
  background-color: $dark;
}

.text-weight {
  font-weight: 800;
}

// **** RewardsSection ****

.row-cumulative-reward {
  height: 3.6vh;
  width: 100%;
}

// **** Observations Container ****

.row-sort-button {
  position: absolute;
  top: 7rem;
  right: 0;
  z-index: 2;
}

@media (max-width: 576px) {
  .row-sort-button {
    top: 8rem;
  }
}

.light_tabs {
  background-color: $white;
  li,
  button {
    background-color: $white !important;
    color: $dark !important;
    border-bottom: 2px solid $gray-300;
  }
}

.dark_tabs {
  background-color: $dark;
  li,
  button {
    background-color: $dark !important;
    color: $white !important;
    border-bottom: 2px solid $gray-400 !important;
  }
}


.btn-primary:active {
  color: black;
  background-color:$dark !important;
}
